<template>
  <div class="page-plan">
    <PageHeader />
    <div class="btns-nav">
      <div :class="[type === '返回' ? 'active-btn' : '']" @click="resetScene()">返回</div>
      <div :class="[type === '虚实同步' ? 'active-btn' : '']" @click="changeType('虚实同步')">虚实同步</div>
      <div :class="[type === '生产回溯' ? 'active-btn' : '']" @click="changeType('生产回溯')">生产回溯</div>
      <!-- <div :class="[type === '虚拟装配' ? 'active-btn' : '']" @click="changeType('虚拟装配')">虚拟装配</div> -->
    </div>

    <div
      @animationend="onAnimationEnd"
      ref="leftElement"
      :class="['page-l', shake ? 'animation-left' : '', type === '生产回溯' ? 'layout2' : '']"
    >
      <!-- 设备列表 -->
      <DeviceList :title="onWorkshop ? '设备状态' : '区域设备'"/>

      <!-- 报警列表 -->
      <WarningMessage
        class="left-card-three"
        :title="onWorkshop ? '报警汇总' : '区域汇总'"
        :showSlect="onWorkshop"
      />
    </div>

    <div
      @animationend="onAnimationEnd"
      v-if="!onWorkshop"
      ref="rightElement"
      :class="['page-r', shake ? 'animation-right' : '', type === '生产回溯' ? 'layout2' : '']"
    >
      <ProductionLineAgen class="right-card-one" v-if="onWorkshop" />

      <div class="right-card-one" style="height: 100%" v-else>
        <div class="region-tab" @click="changeRightTab">{{ changeRight ? '区域执行任务' : '区域简介' }}</div>
        <!-- 区域简介 -->
        <RegionalAgen v-if="changeRight" />
        <!-- 区域执行任务 -->
        <RegionTaskInfo v-else />
      </div>
    </div>

    <WorkshopBottomGanttChart />
  </div>
</template>

<script setup>
import { ref, watch, onMounted, computed, toRefs } from 'vue'
import PageHeader from '@/components/Header/index.vue'
import DeviceList from './components/DeviceList.vue'
import WarningMessage from './components/WarningMessage.vue'
import RegionTaskInfo from './components/RegionTaskInfo.vue'
import WorkshopBottomGanttChart from './components/WorkshopBottomGanttChart.vue'
import RegionalAgen from './components/RegionalAgen.vue'
import ProductionLineAgen from './components/ProductionLineAgen.vue'
import { useStore } from 'vuex'
import { getAlarmList, getDeviceStatusList, getInfoFuzzy } from '@/api/CollectRequest.js'
const store = useStore()
const { currentRegionName } = toRefs(store.state)
const emit = defineEmits(['reset'])
const changeRight = ref(true)
function changeRightTab () {
  changeRight.value = !changeRight.value
  shakes({ rightElement: rightElement.value })
}
const onWorkshop = computed(() => {
  return currentRegionName.value === ''
})

const type = ref('虚实同步')
function changeType (sty) {
  type.value = sty
  if (sty === '生产回溯') {
    store.commit('setChartIsShow', true)
  } else {
    store.commit('setChartIsShow', false)
  }
}
watch(
  () => store.state.chartIsShow,
  val => {
    if (val) {
      type.value = '生产回溯'
    } else {
      type.value = '虚实同步'
    }
  },
  { immediate: true, deep: true }
)

// #region 动画函数
const shake = ref(false)
function shakes ({ leftElement, rightElement }) {
  shake.value = false

  // 处理左侧元素动画
  resetAnimation({
    element: leftElement,
    animationClass: 'animation-left',
    initialTransform: 'translateX(-100%)', // 初始位置
    childSelectors: ['.left-card-one', '.left-card-two', '.left-card-three']
  })
  // 处理右侧元素动画
  resetAnimation({
    element: rightElement,
    animationClass: 'animation-right',
    initialTransform: 'translateX(100%)', // 初始位置
    childSelectors: ['.right-card-one', '.right-card-two', '.right-card-three']
  })

  shake.value = true
}

// 封装动画重置逻辑
const resetAnimation = ({ element, animationClass, initialTransform, childSelectors }) => {
  if (!element) return

  // 暂停当前动画并移除动画类
  element.style.animationPlayState = 'paused'
  element.classList.remove(animationClass)

  // // 重置父元素 transform 到初始位置
  // element.style.transform = initialTransform

  // 处理子元素
  childSelectors.forEach(selector => {
    const childElement = element.querySelector(selector)
    if (childElement) {
      // 暂停子元素动画
      childElement.style.animationPlayState = 'paused'
      // 重置子元素 transform 到初始位置
      // childElement.style.transform = initialTransform
      // 强制子元素重排
      const _ = childElement.offsetWidth
    }
  })
  // 强制父元素重排，确保样式更新
  const _ = element.offsetWidth

  // 恢复父元素动画
  element.classList.add(animationClass)
  element.style.animationPlayState = 'running'

  // 恢复子元素动画
  childSelectors.forEach(selector => {
    const childElement = element.querySelector(selector)
    if (childElement) {
      childElement.style.animationPlayState = 'running'
    }
  })
}

function onAnimationEnd (event) {
  if (event.target.classList.contains('left')) {
    shake.value = false
  }
  if (event.target.classList.contains('right')) {
    shake.value = false
  }
}
const leftElement = ref(null)
const rightElement = ref(null)
// #endregion

onMounted(async () => {
  // 设备列表，已经接通
  getDeviceStatusList().then(res => {
    console.log('设备列表', res.data.data)
    if (!res.data.data.length) return
    store.commit('setDeviceList', res.data.data)
    // console.log('过滤后设备列表', deviceList.value)
  })

  // tudo 所有型架在线位置
  getInfoFuzzy({ modelId: 'fixtureInfo' }).then(res => {
    // console.log('所以型架在线位置', res.data.data)
    if (res.data.data.length) {
      store.commit('setInfoFuzzy', res.data.data)
    }
  })

  // tudo 报警列表
  getAlarmList().then(res => {
    console.log('车间级报警列表', res.data.data)
    if (!res.data.data.length) return
    store.commit('setAlarmListData', res.data.data)
  })
  // setInterval(() => {
  // }, 1000)

  watch(() => currentRegionName, () => {
    shakes({ leftElement: leftElement.value, rightElement: rightElement.value })
  }, { immediate: true, deep: true })
})

let domMap = {}
function open (type) {
  domMap = {
    all: { leftElement: leftElement.value, rightElement: rightElement.value },
    left: { leftElement: leftElement.value },
    right: { rightElement: rightElement.value }
  }

  switch (type) {
    case 'all':
      shakes(domMap.all)
      break
    case 'leftRegion':
      shakes(domMap.left)
      break
    case 'leftDevice':
      shakes(domMap.left)
      break
    case 'right':
      shakes(domMap.right)
      break
  }
}

// 切换区域
function ChangeArea (regionName) {
  store.commit('setCurrentRegionName', regionName)
  store.commit('setDeviceListId', '')
  console.log('regionName', regionName)
}
// 切换到车间
function resetScene () {
  emit('reset')
}

defineExpose({ close, ChangeArea })

// document.addEventListener('keydown', e => {
//   if (e.key === 'q') {
//     // 切换-- 展示全部
//     open('all')
//   } else if (e.key === 'w') {
//     // 切换-- 展示设备信息
//     open('leftDevice')
//   } else if (e.key === 'e') {
//     //  切换--展示区域信息
//     open('leftRegion')
//   } else if (e.key === 'r') {
//     //  切换-- 展示右侧
//     open('right')
//   }
// })
</script>

<style lang="less">
.page-plan {
  .btns-nav {
    cursor: pointer;
    position: fixed;
    top: 28px;
    right: 10px;
    z-index: 1;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 14px;
    color: rgb(210, 210, 210);
    display: flex;
    > div {
      text-align: center;
      line-height: 40px;
      width: 180px;
      height: 40px;
      background: url('@/assets/homePage/btn.png') no-repeat;
      background-size: 100% 100%;
      transition: all 0.3s;
      &:hover {
        transition: all 0.3s;
        color: rgb(255, 255, 255);
        background: url('@/assets/homePage/btn_hover.png') no-repeat;
        background-size: 100% 100%;
      }
      &:nth-child(n + 1) {
        margin-left: -19px;
      }
    }
    .active-btn {
      color: rgb(255, 255, 255);
      background: url('@/assets/homePage/btn_hover.png') no-repeat;
      background-size: 100% 100%;
    }
  }

  .page-l,
  .page-r {
    pointer-events: auto;
    position: fixed;
    top: 113px;
    width: 400px;
    height: 915px;
    background-color: rgba(14, 34, 48, 0.7);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    transition: height 0.5s;
  }
  .layout2 {
    height: 533px;
  }
  .page-l {
    left: 10px;
  }
  .page-r {
    right: 10px;

    .region-tab {
      position: absolute;
      cursor: pointer;
      top: 2px;
      left: 235px;
      font-family: YouShecBiaoTiHei;
      font-weight: 400;
      font-size: 19px;
      margin-left: 30px;
      line-height: 37px;
      color: #ccc;
      display: inline-block;
      text-shadow: 1px 1px 2px #122e67;
      z-index: 2;
      &:hover {
        color: #fff;
      }
    }
  }

  --duration: 1s;
  .animation-left {
    transform: translateX(-100%);
    animation: moveRight var(--duration) ease calc(var(--duration) * 0) 1 normal forwards;
    .left-card-one {
      transform: translateX(-100%);
      animation: moveRight calc(var(--duration) * 0.75) ease calc(var(--duration) * 0.25) 1 normal forwards;
    }
    .left-card-two {
      transform: translateX(-100%);
      animation: moveRight calc(var(--duration) * 0.5) ease calc(var(--duration) * 0.5) 1 normal forwards;
    }
    .left-card-three {
      transform: translateX(-100%);
      animation: moveRight calc(var(--duration) * 0.25) ease calc(var(--duration) * 0.75) 1 normal forwards;
    }
  }

  .animation-right {
    transform: translateX(100%);
    animation: moveLeft var(--duration) ease calc(var(--duration) * 0) 1 normal forwards;
    .right-card-one {
      transform: translateX(100%);
      animation: moveLeft calc(var(--duration) * 0.75) ease calc(var(--duration) * 0.25) 1 normal forwards;
    }
    .right-card-two {
      transform: translateX(100%);
      animation: moveLeft calc(var(--duration) * 0.5) ease calc(var(--duration) * 0.5) 1 normal forwards;
    }
    .right-card-three {
      transform: translateX(100%);
      animation: moveLeft calc(var(--duration) * 0.25) ease calc(var(--duration) * 0.75) 1 normal forwards;
    }
  }

  @keyframes moveLeft {
    0% {
      // display: none;
      opacity: 0;
      transform: translateX(100%);
    }
    100% {
      // display: block;
      opacity: 1;
      transform: translateX(0%);
    }
  }

  @keyframes moveRight {
    0% {
      // display: none;
      opacity: 0;
      transform: translateX(-100%);
    }
    100% {
      // display: block;
      opacity: 1;
      transform: translateX(0%);
    }
  }

  // 处理tooltip背景
  .atooltip {
    background: rgba(0, 47, 93, 0.95) !important;
    font-family: PingFang;
    font-size: 18px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 8px 16px !important;
    border: none !important;
    .el-popper__arrow {
      background: rgba(0, 47, 93, 0.95) !important;
      &::before {
        background: rgba(0, 47, 93, 0.95) !important;
      }
    }
  }
}
</style>
